<template>
    <div>
        <div class="left"><h1>计划管理</h1></div>
        <el-row>
          <el-col :span="24" class="left">
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="创建人">
                  <el-select v-model="formInline.region" placeholder="计划类型">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="计划类型">
                  <el-select v-model="formInline.region" placeholder="计划类型">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="计划月份">
                    <el-date-picker
                      v-model="formInline.value2"
                      type="month"
                      placeholder="选择月">
                    </el-date-picker>
                </el-form-item>
              </el-form>
          </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" class="left">
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button @click="onSubmit">重置</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" class="right">
                <el-button @click="onSubmit">批量操作</el-button>
                <el-button type="primary" @click="onSubmit">+ 新建</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
             <el-table
                :data="tableData"
                stripe
                style="width: 100%; margin-top: 15px;border: 1px solid #ebebeb;">
                <el-table-column
                  prop="number"
                  label="序号"
                >
                </el-table-column>
                <el-table-column
                  prop="date"
                  label="计划日期"
                >
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="标题"
                 >
                </el-table-column>
                <el-table-column
                  prop="province"
                  label="创建人"
                 >
                </el-table-column>
                <el-table-column
                  prop="city"
                  label="计划类型"
                 >
                </el-table-column>
                <el-table-column
                  label="操作"
                  width="100">
                  <template slot-scope="scope">
                    <el-button type="text" size="small">编辑</el-button>
                    <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
        </el-row>
        <el-row class="page">
            <el-col :span="24">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="1000">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'planmange',

    data() {
        return {
            formInline: {
              user: '',
              region: '',
              value2: ''
            },
            tableData: [{
                     number:'1',
                     date: '2016-05-02',
                     name: '王小虎',
                     province: '上海',
                     city: '普陀区',
                     address: '上海市普陀区金沙江路 1518 弄',
                     zip: 200333
                   }, {
                     number:'2',
                     date: '2016-05-04',
                     name: '王小虎',
                     province: '上海',
                     city: '普陀区',
                     address: '上海市普陀区金沙江路 1517 弄',
                     zip: 200333
                   }, {
                     number:'3',
                     date: '2016-05-01',
                     name: '王小虎',
                     province: '上海',
                     city: '普陀区',
                     address: '上海市普陀区金沙江路 1519 弄',
                     zip: 200333
                   }, {
                     number:'4',
                     date: '2016-05-03',
                     name: '王小虎',
                     province: '上海',
                     city: '普陀区',
                     address: '上海市普陀区金沙江路 1516 弄',
                     zip: 200333
                   }]
        };
    },

    methods: {
        onSubmit() {
            console.log('submit!');
        },
        handleClick(row) {
                console.log(row);
              }
    },
};
</script>

<style>
    .left {
        text-align: left;
    }
    .right {
        text-align: right;
    }
    .page{
        margin: 20px 0;
    }
    
</style>
